<template>
	<div class="propertyLogOwn">
        <div class="propertyLogPopup" v-show="propertyLogState"></div>
        <div class="propertyLogCont" v-show="propertyLogState">
            <div class="head">楼盘日志<Icon class="closeIcon" type="md-close" @click="closeProperty"></Icon></div>
            <div class="cont">
                <div class="title">{{logData.buildingAlias || $route.query.buildingAlias}}</div>
                <Form ref="formInline" :model="formInline" label-position="left" :label-width="70" inline>
                    <FormItem label="操作时间" >
                        <DatePicker @on-change="operatingTimeFun" ref="formDate" type="datetimerange" placeholder="请选择操作时间范围" style=" width: 340px;" ></DatePicker>
                    </FormItem>
                    <FormItem label="操作人员" prop="operator">
                        <Select placeholder="请选择操作人员" style=" width: 136px;" filterable v-model="formInline.operator" >
                            <Option v-for="item in operatorList" :value="item.createrId" :key="item.createrId" :label="item.creater"></Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" class="propertyLogOwn_serchButton" @click="logInquire" >查询</Button>
                    <Button type="primary" @click="logReset" >重置</Button>
                </Form>
                <div class="contTab">
                    <Table :height="contTabRefH" ref="contTabRef" :columns="columns1" :data="data1" maxHeight="520px"></Table>
                </div>
                <div class="tabList-tfoot" >
                    <div class="totalCount">
                          当前第 {{pagerData.page}} 页， 
                          当前第 {{(pagerData.page-1)*pagerData.rows+1}}条到第{{pagerData.page*pagerData.rows>pagerData.total?pagerData.total:pagerData.page*pagerData.rows}}条,
                          共{{pagerData.total}}条
                    </div>
                    <div class="totalCountright">
                        <Page style=" padding-left: 0px;" ref="refPager" class="pager" show-sizer show-elevator
                              :current="pagerData.current"
                              :total="pagerData.total"
                              :pageSize="pagerData.rows"
                              :pageSizeOpts="rowOptions"
                              placement="top"
                              @on-change="pageChange"
                              @on-page-size-change="rowChange">
                        </Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getLogList, getLogUserList} from '@/api/buildingCheckcenter'
	export default {
        props: ['propertyLogState', 'logData'],
		components: {
		},
		data() {
			return {
                contTabRefH: 0,
                rowOptions: [10, 15, 30, 50], // 每页显示数
                pagerData: {
                    page: 1,
                    total: 0,
                    rows: 10
                },
                columns1: [
                    {
                        title: '操作时间',
                        key: 'createTime',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '操作内容',
                        key: 'content',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },
                                    domProps: {
                                        title: params.row.content
                                    }
                                }, params.row.content)
                            ]);
                        }
                    },
                    {
                        title: '操作工号',
                        key: 'createrId',
                        align: 'center',
                        width: 120
                    },
                    {
                        title: '操作人员',
                        key: 'creater',
                        align: 'center',
                        width: 120
                    }
                ],
                data1: [],
                operatorList: [],
                formInline: {
                    operatingTime: ['', ''],
                    operator: ''
                }
            };
        },
		methods: {
            operatingTimeFun(date) {
                this.formInline.operatingTime = date;
            },
            // 查询
            logInquire() {
                this.SameData();
            },
            // 重置
            logReset() {
                this.$refs.formDate.handleClear();
                this.$refs.formInline.resetFields();
                this.formInline.operatingTime = ['', ''];
                this.formInline.operator = '';
                this.SameData();
            },
            // 点击分页
            pageChange(page) {
                this.pagerData.page = page;
                this.SameData();
            },
            // 切换分页数
            rowChange(rows) {
                this.pagerData.rows = rows;
                this.pagerData.page = 1;
                this.SameData();
            },
            // 关闭弹框
            closeProperty() {
                this.$emit('closePopup');
            },
            //获取列表
            getList(){
              getLogUserList({buildingId: this.$route.query.id ||this.$route.query.bid||this.logData.buildingId}).then(res=>{
                console.log("获取员工类表",res);
                this.operatorList =res.list;
              })
            },
            SameData() {
                console.log(5656,this.pagerData)
                let {page, rows} = this.pagerData,{operatingTime, operator} =this.formInline; 
                if(operatingTime[0] || operatingTime[1] || operator)page = 1;
                let param = {
                    page,
                    rows,
                    buildingId: this.$route.query.id ||this.$route.query.bid || this.logData.buildingId,
                    startTime: operatingTime[0],
                    endTime: operatingTime[1],
                    createrId: operator
                };

                getLogList(param).then((res) => {
                  console.log("获取日志列表", res)
                  this.pagerData.total = Number(res.total);
                  this.data1 = res.list;
                  // this.$nextTick(() => {
                  //     if (!this.contTabRefH) {
                  //         let clientH = window.innerHeight;
                  //         this.contTabRefH = '';
                  //         setTimeout(() => {
                  //             if (this.$refs.contTabRef.$el.offsetHeight > clientH - 404) {
                  //                 this.contTabRefH = clientH - 404;
                  //             } else {
                  //                 this.contTabRefH = '';
                  //             }
                  //         }, 10);
                  //     }
                  // });
                });
            }
		},
		created() {
            // 获取楼盘日志数据
            this.SameData();
            this.getList()
		},
        mounted() {
            window.onresize = () => {
                return (() => {
                    let clientH = window.innerHeight;
                    this.contTabRefH = '';
                    setTimeout(() => {
                        if (this.$refs.contTabRef.$el.offsetHeight > clientH - 404) {
                            this.contTabRefH = clientH - 404;
                        } else {
                            this.contTabRefH = '';
                        }
                    }, 10);
                })();
            };
        }
    };
</script>
<style lang="scss" scoped>
.propertyLogOwn{
    .propertyLogPopup{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(55,55,55,.6);
        height: 100%;
        z-index: 400;
    }
    .propertyLogCont{
        width: 900px;
        position: fixed;
        left: 50%;
        top: 100px;
        margin-left: -405px;
        background-color: #fff;
        border-radius: 4px;
        z-index: 410;
        .head{
            padding: 14px;
            font-size: 14px;
            color: #1c2438;
            font-weight: 600;
            position: relative;
            line-height: 20px;
            border-bottom: 1px solid #E9EAEC;
            .closeIcon{
                position: absolute;
                right: 14px;
                top: 14px;
                font-size: 20px;
                cursor: pointer;
            }
        }
        .cont{
            padding: 6px 14px 44px 14px;
            .ivu-form-item{
                margin-bottom: 16px;
            }
            .title{
                font-size: 14px;
                line-height: 30px;
                margin-bottom: 6px;
            }
            .contTab{
                border-top: 1px solid #E3E8EE;
                border-left: 1px solid #E3E8EE;
            }
            .tabList-tfoot {
                width: 100%;
                margin: 14px 0;
                .totalCount {
                    height: 32px;
                    line-height: 32px;
                    display: block;
                    vertical-align: top;
                    color: #657180;
                }
                .totalCountright{
                   overflow: hidden;
                   float: right;
                   display: inline-block;
                    .pager {
                        float: right;
                        display: block;
                        vertical-align: top;
                        background-color: #fff;
                        padding-left: 50px;
                    }
                }
            }
        }
    }
    &_serchButton{
        margin-right: 6px;
    }
   
}
/deep/.ivu-table-wrapper{
    overflow: auto;
}
</style>
